import { defineComponent } from 'vue';
import { addstaff, getstaffList, delstaff, searchstaff } from '@/api/stafflist';
import { updatestaff } from '@/api/stafflist';
import { dayjs, ElMessageBox, ElMessage } from 'element-plus';
import type { Action } from 'element-plus';
import { ref, reactive } from 'vue';

export default defineComponent({
    data() {
        return {
          value: '',
          value1: '',
          input: '',
          input1: '',
            radio: ref(2),
            dialogFormVisible: false,
            stateform: false,
            // 弹窗隐藏初始化
            // 初始化数据字段数据
            staff: {
                category: '',
                name: '',
                phone: '',
                remark: '',
                state: '',
                Associatestore: '',
            },
            editstaff: {
                category: '',
                name: '',
                phone: '',
                remark: '',
                state: '',
                Associatestore: '',
            },
            // 存储数据
            list: [],
            limit: 10,
            page: 1,
            total: 1,
            // 编辑弹窗初始化
            showEdit: false,
            rules: {
              name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
              phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        // 编辑店铺弹窗
        openEdit(row: any) {
            this.editstaff = row;
            this.showEdit = true;
          },
        // 删除店铺
          handleDel(id: number) {
            // 删除的操作一般需要二次确认 避免用户误操作
            ElMessageBox.alert('是否确认删除该数据项？', '系统提示', {
                confirmButtonText: '确认',
              callback: async (action: Action) => {
                if (action === 'cancel') return false;
                const res = await delstaff(id);
                console.log('真正的去执行删除', res);
                if (res.status === 200) {
                  this.$message.success('删除成功');
                  this.getList();
                } else {
                  this.$message.warning('删除失败');
                }
                return true;
              },
            });
          },
          // 编辑店铺
          async handleEidt() {
            console.log('editstaff', this.editstaff);
            const { id, ...postdata } = this.editstaff;
            const res = await updatestaff(id, postdata);
            console.log('res', res);
            const { status } = res;
            if (status === 200) {
              this.$message.success('修改成功');
              this.showEdit = false;
              this.getList();
            } else {
              this.$message.warning('修改失败');
            }
          },
        handeSizeChange(val: number) {
            console.log('val', val);
            this.limit = val;
            this.getList();
          },
          handlePageChange(val: number) {
            this.page = val;
            this.getList();
          },
         // 获取数据
    async getList() {
      const data = {
        $limit: this.limit,
        $skip: (this.page - 1) * this.limit,
      };
      if (this.value !== '') {
        (data as any).category = this.value;
      }
      if (this.value1 !== '') {
        (data as any).state = this.value1;
      }
      if (this.input.trim() !== '') {
        (data as any).name = this.input;
      }
      if (this.input1.trim() !== '') {
        (data as any).phone = this.input1;
      }
      const res = await getstaffList(data);
      this.list = res.data.data;
      console.log(this.list);
      this.total = res.data.total;
    },
    //刷新数据
    async getListRest() {
      this.input = '';
      this.input1 = '';
      this.value = '';
      this.value1 = '';
      this.getList();
    },
          // 搜索店铺
          async searchbtn() {
            const $skip = (this.page - 1) * this.limit;
            const res = await searchstaff({
              $skip,
              $limit: this.limit,
              staffname: this.staffname,
              state: this.state,
            });
            console.log('获取列表的结果', res);
            this.list = res.data.data;
            console.log(this.list);
            this.total = res.data.total;
          },
          //转换时间
          formatTime(time: string) {
            return dayjs(time).format('YYYY-MM-DD HH:MM:ss');
          },
        //   增加店铺
        async staffAdd() {
            console.log('staff', this.staff);
            const res = await addstaff(this.staff);
            console.log('res', res);
            const { status } = res;
            console.log('status', status);
            if (status === 201) {
                this.$message.success('添加成功');
                this.dialogFormVisible = false;
                this.getList(); // 添加成功之后重新的获取列表内容
            } else {
                this.$message.warning('添加失败');
            }
        },
        //修改状态
    changestate(row: any, val: number, id: number) {
      if (!val) {
        console.log('启动');
        ElMessageBox.confirm(
          `确定启用"${row.name}"吗？`,
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          },
        )
          .then(async () => {
            console.log('点击了确认');
            this.editDengji = row;
            let { ...postdata } = this.editDengji;
            postdata.state = 1;
            await updatestaff(id, postdata);
            this.getList();
            ElMessage({
              type: 'success',
              message: '启用成功',
            });
          }).catch(async () => {
            this.editDengji = row;
            let { ...postdata } = this.editDengji;
            postdata.state = 0;
            await updatestaff(id, postdata);
            this.getList();
          });
      } else {
        console.log('关闭');
        ElMessageBox.confirm(
          `确定禁用"${row.name}"吗？`,
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          },
        )
          .then(async () => {
            this.editDengji = row;
            let { ...postdata } = this.editDengji;
            postdata.state = 0;
            await updatestaff(id, postdata);
            this.getList();
            ElMessage({
              type: 'success',
              message: '禁用成功',
            });
          }).catch(async () => {
            this.editDengji = row;
            let { ...postdata } = this.editDengji;
            postdata.state = 1;
            await updatestaff(id, postdata);
            this.getList();
          });
      }
    },
    },
});
